<template>
	<view class="app-setting">
		<!-- <u-navbar :is-back="true"
		:title="i18n.My_team"
		:background="background">
		</u-navbar> -->
		
		<u-navbar :is-back="false" :background="background" title-color="#ffffff"  :immersive="true"   titleWidth="350">
			<view class="menu">
				<!-- <i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i> -->
				<image src="/static//index/menu.png" mode="widthFix" lazy-load @tap.stop="shownavs"></image>
			</view>
			<view class="menu-right" slot="right">
				{{address_l || '-'}}
			</view>
		</u-navbar>
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/menu/logo.png" mode="widthFix" lazy-load></image>
				</view>
				
				<view class="nav-address">
					{{address_l || '-'}}
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="clickBullentin">
					<view class="nav-item-l">
						<image src="../../static/menu/ce-0.png" mode="widthFix"></image>首页
					</view>
					<i class="icon iconfont icon-xiayibu"></i>
					</view>
				
				
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(5)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-2.png" mode="widthFix"></image>生态</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
						<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(24)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-1.png" mode="widthFix"></image>抢单</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(6)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-3.png" mode="widthFix"></image>兑换</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
						
						
						<view class="nav-item active" hover-class="hover-transform1" @tap.stop="">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-4-1.png" mode="widthFix"></image>团队</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
						
						
					
			<!-- 	<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><view class="nav-item-l"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
				
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(1)"><view class="nav-item-l"><image src="../../static/menu/ce-5.png" mode="widthFix"></image>我的</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(89)"><view class="nav-item-l"><image src="../../static/menu/ce-6.png" mode="widthFix"></image>公告</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
			</view>
		</u-popup>
		
		
		<view class="team-head-c">
			<view class="team-head-c-l">
				<text>我的等级</text>
				<view>{{name || '-'}}</view>
			</view>
			<view class="team-head-c-l">
				<text>团队总人数</text>
				<view>{{tdrs || 0}}</view>
			</view>
			<view class="team-head-c-l">
				<text>团队有效人数</text>
				<view>{{tdyxrs || 0}}</view>
			</view>
		</view>
		
		
		
		<view class="team-contant">
			<view class="team-head">
				<view class="team-head-con">
					<view class="team-head-con-item">
						<text>团队流水(USDT)</text>
						<view>{{yeji || '0'}}</view>
					</view>
					<view class="team-head-con-item">
						<text>团队人数</text>
						<view>{{tdrs || '0'}}</view>
					</view>
					<!-- <view class="team-head-con-item">
						<text>团队今日流水(USDT)</text>
						<view>{{tdjrls || '0'}}</view>
					</view>
					<view class="team-head-con-item">
						<text>大区流水(USDT)</text>
						<view>{{dqls || '0'}}</view>
					</view>
					<view class="team-head-con-item">
						<text>小区流水(USDT)</text>
						<view>{{xqls || '0'}}</view>
					</view>
					<view class="team-head-con-item">
						<text>参与流水(USDT)</text>
						<view>{{cyls || '0'}}</view>
					</view>
					<view class="team-head-con-item">
						<text>出局流水(USDT)</text>
						<view>{{cjls || '0'}}</view>
					</view> -->
					<!-- <view class="team-head-con-item">
						<text>{{i18n.Community_performance}}(USDT)</text>
						<view>{{xqyj || 0}}</view>
					</view>
					
					<view class="team-head-con-item">
						<text>{{i18n.Personal_input}}(USDT)</text>
						<view>{{grtr || 0}}</view>
					</view> -->
				</view>
				
				
			</view>
			
			
			<view class="team-list-title">
				<image src="../../static/index/index-t.png" mode="widthFix"></image>
				<text>团队列表</text>
			</view>
			<view class="team-list-title-l">
				<view class="team-list-title-l-i">下级</view>
				<view class="team-list-title-l-i">金额</view>
			</view>
			<template v-if="list.length>0">
				<view class="list">
					
					
				<!-- 	<view class="lever-tip" v-if="showMesageShow">
						{{message}}
					</view> -->
					<view class="level-wrapper">
						<view class="inner-content">
							<!-- <mix-tree :list="list"></mix-tree> -->
							<block v-for="(item,index) in list" :key="index">
								<view class="inner-content-c">
									<view class="inner-content-l">
										<view class="">
											{{item.address}}
										</view>
										 <text>{{item.name || ''}}</text>
									</view>
									<view class="inner-content-r">{{item.freeze}}</view>
								</view>
								
							</block>
							
						</view>
					</view>
				</view>
			</template>
		</view>
		
	<!-- 	<view class="node-content">
			<view class="node-content-t">
				<view>{{i18n.Node_data}}</view>
				<text>{{tdrs || 0}}</text>
			</view>
			<view class="node-content-co">
				<view class="node-content-co-item">
					<text>{{i18n.Direct_push_node}}</text>
					<view>{{ ztjd || 0}}</view>
				</view>
				
				
				<view class="node-content-co-item">
					<text>{{i18n.Conclusion}}</text>
					<view>{{ zjd || 0}}</view>
				</view>
				<view class="node-content-co-item">
					<text>{{i18n.Regional_node}}</text>
					<view>{{ dqjd || 0}}</view>
				</view>
				<view class="node-content-co-item">
					<text>{{i18n.Cell_node}}</text>
					<view>{{ xqjd || 0}}</view>
				</view>
				
			</view>
		</view> -->
		
		
		
		
		
		
		<load v-if="showLoad"></load>
		<!-- <message 
		:shows="showMesageShow" 
		:message="message" 
		@close="closeMessage" 
		@jump="closeMessage"/> -->
	</view>
</template>

<script>
	import Load from '../../components/common/load.vue';
	import {pageto, pageback, fetch, showToast} from "../../common/js/util.js"
	import {mapGetters, mapMutations} from 'vuex';
	import mixTree from '@/components/mix-tree/mix-tree';
	import Message from '@/components/common/message.vue';
	export default{
		data(){
			return{
				message:'',
				showMesageShow:false,
				background: '#21242D',
				showLoad:false,
				ztyeji:'',
				ths:'',
				list: [],
				tdrs: 0,
				yeji: 0,
				ztrs: 0,
				avatar: '',
				yeji1: '',
				yeji2:'',
				name1: '',
				freeze1: '',
				lvShow:false,
				myzt:'',
				tdsl:'',
				ekn_tr:'',
				ekn_xqyj:'',
				xqyj:'',
				dqyj:'',
				zjtr:'',
				zttwo:'',
				tdrstwo:'',
				lv:'',
				name:'',
				dqjd:'',
				freeze:'',
				xqjd:'',
				yeji_u:'',
				zjd:'',
				ztjd:'',
				zyj:'',
				grtr:'',
				open_type:'',
				page:1,
				rows:14,
				tdjrls :'',
				dqls :'',
				xqls :'',
				cyls :'',
				cjls:'',
				showNav:'false',
				address_l:'',
				tdyxrs:'',
				exchange_url:'',
				grab_url:''
			}
		},
		computed:{
			formatParsefloat(val){
				if ((!val && val != 0) || val == null || val == undefined || val == 'undefined') {
					return 0
				}
				return parseFloat(val)
			},
			i18n () {  
				return this.$t('message')
			},
			...mapGetters([
				'getTextArr',
				'getLangType',
				'getLoginInfo',
				'getRequestUrl',
				'getInTeam'
			])
		},
		// onLoad(e) {
			// // console.log(e);
			// let infos = JSON.parse(e.item)
			// this.avatar = infos.avatar ? infos.avatar : '';
			// this.yeji1 = infos.yeji;
			// this.name1 = infos.name;
			// this.freeze1 = infos.freeze;
		// },
		onShow(){
			this.getSomeUrl()
			this.address_l = this.phoneNumShow(this.getLoginInfo.address)
			this.showMesageShow = false;
			this.list=null;
			this.page=1;
			this.list=[];
			// if(this.getInTeam){
				this._getTeamInfo();
			// }
		},
		onReachBottom(){
			this._getTeamInfo();
		},
		methods:{
			...mapMutations(['setInTeam']),
			async getSomeUrl(){
				await fetch('/api/Pledge/jumpUrl', '', "post").then(res=>{
					this.showLoad = false;
					if(res.data.code){
						
						if(res.data.code==1){
							// this.getUser()
							this.exchange_url = res.data.data.exchange_url
							this.grab_url = res.data.data.grab_url
						}
						
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			shownavs(){
				// console.log('q3eq2',this.showNav);
				this.showNav =true
			},
			clickBullentin() {
				clearInterval(this.timer)
				this.timer=null;
				this.timer=''
				uni.reLaunch({
					url:'../index/index'
				})
			},
			getQz(index){
				this.showNav=false
				if(index==1){
					clearInterval(this.timer)
					this.timer=null;
					this.timer=''
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==6){
					////  兑换
					if(this.exchange_url){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							plus.runtime.openURL(this.exchange_url);
						}, 500)	
						// #endif
						// #ifdef H5 
						window.location.href=this.exchange_url
						// #endif
					}
					return
				}else if(index==24){
					////  抢单
					if(this.grab_url){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							plus.runtime.openURL(this.grab_url);
						}, 500)	
						// #endif
						// #ifdef H5 
						window.location.href=this.grab_url
						// #endif
					}
					return
				}else if(index==5){
					uni.reLaunch({
						url:'/pages/wealth-treasure/wealth-treasure'
					})
					return
				}else if(index==3){
					
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}else if(index==89){
					uni.reLaunch({
						url:"/pages/new/notice"
					})
					return
				}
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
				// if(this.indexInfo.bps){
				// 	// #ifdef APP-PLUS
				// 	setTimeout(()=>{
				// 		plus.runtime.openURL(this.indexInfo.bps);
				// 	}, 500)	
				// 	// #endif
				// 	// #ifdef H5 
				// 	window.location.href=this.indexInfo.bps
				// 	// #endif
				// }
			},
			phoneNumShow (info) {
				// let that = this;
				let number = info; //获取到手机号码字段
				let mphone = number.substring(0, 4) + '****' + number.substring(info.length-5,info.length);
				// that.tel = mphone
				return mphone
			},
			closeMessage(){
				this.showMesageShow = !this.showMesageShow
			},
			_getTeam() {
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
				}
				// uni.showLoading()
				this.showLoad = true;
				fetch('/api/User/two_user', _data, "post")
					.then(res => {
						this.setInTeam(false)
						// uni.hideLoading()
						this.showLoad = false;
						let _tmp = {
								id: this.getLoginInfo.id,
								username: this.getLoginInfo.username,
								name: this.name,
								yeji: this.yeji,
								tdrs:this.tdrs,
								freeze:this.freeze
							};
							// console.log(_tmp);
						this.list = [_tmp];
						if (res.data.code==1) {
							if (res.data.data.length > 0) {
								this.list = [
									Object.assign(this.list[0], {
										xj: res.data.data
									})
								];
							}
						} else if(res.data.code ==2){
							showToast(res.data.msg)
							uni.navigateTo({
								url:"/pages/new-login/index?type=2"
							})
						}else {
								showToast(res.data.msg);
						}
					}).catch(err=>{
						this.showLoad = false;
					})
			},
			_getTeamInfo() {
				let _data =  {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					page:this.page,
					rows:this.rows
				}
				// uni.showLoading()
				this.showLoad = true;
				fetch('/api/User/team', _data, 'post') 
					.then(res => {
						// uni.hideLoading()
						this.showLoad = false;
						if (res.data.code) {
							// freeze: "0.00"
							// lv: 0
							// name: "会员"
							// tdrs: 3
							// yeji: "20"
							
							
							let { freeze, lv, name, tdrs, yeji, open, tdjrls, dqls, xqls, cyls, cjls, tdyxrs}= res.data.data;
							this.freeze = freeze;
							this.lv = lv;
							this.name = name;
							this.tdrs = tdrs;
							this.yeji = yeji;
							this.open_type = open
							
							
							this.tdjrls = tdjrls
							this.dqls = dqls
							this.xqls = xqls
							this.cyls = cyls
							this.cjls = cjls
							this.tdyxrs = tdyxrs
							// if(Number(this.lv)>0 || (this.open_type==1 && Number(this.lv)==0)){
							// 	this._getTeam();
							// }
							// if(this.ths<=0){
							// 	this.message = this.getLangType=='chs'?'本帐户未激活，未能享受团队业绩':this.getLangType=='en'?'This account is not activated and fails to enjoy team performance':'本帳戶未激活，未能享受團隊業績';
							// 	this.showMesageShow = true;
							// }
							
							let lits = res.data.data.zt_list.data
							if(lits.length==0)return
							lits.forEach((item,index)=>{
								lits[index].address = this.phoneNumShow(item.username)
							})
							if(this.page==1){
								this.list = lits
								// this.list.forEach((item,index)=>{
								// 	this.list[index].address = this.phoneNumShow(item.username)
								// })
							}else{
								
								this.list = this.list.concat(lits)
								
							}
							this.page++
							// console.log(this.list);
						} else {
							showToast(res.data.msg);
						}
					}).catch(err=>{
						this.showLoad = true;
					})
			}
		},
		components: {
			mixTree,Load,Message
		}
	}
</script>

<style lang="scss" scoped>
	.team-list-title{
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		image{
			width: 8rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
		text{
			font-size: 28rpx;
			color: #F4C154;
			line-height: 36rpx;
			display: block;
			color: $white;
		}
	}
	.team-list-title-l{
		margin: 0 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid  rgba($color: #9A9CB8, $alpha: .05);;
		.team-list-title-l-i{
			line-height: 96rpx;
			font-size: 26rpx;
			color: $white;
		}
	}
	.team-contant{
		background: #21242D;
		// background: #f00;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		height: 70vh;
		padding-top: 56rpx;
		position: relative;
		&::before{
			position: absolute;
			width: 100rpx;
			height: 6rpx;
			background:  rgba($color: #E3E3EC, $alpha: .19);
			border-radius: 20rpx;
			content: "";
			z-index: 4;
			left: 50%;
			top: 24rpx;
			transform:translateX(-50%);
		}
	}
	.team-head-c{
		margin: 46rpx 36rpx 80rpx;
		background: linear-gradient(to right, #F5C249, #947222);
		border-radius: 48rpx;
		box-shadow: 0 8rpx  32rpx 2rpx #F5C249;
		padding: 24rpx 66rpx;
		.team-head-c-l{
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: $white;
			font-size: 28rpx;
			font-weight: bold;
			view{
				line-height: 68rpx;
			}
		}
	}
	.nav-conte{
		width: 530rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: #21242D;
		.nav-log{
			// border: 1rpx solid #fff;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			image{
				width: 105rpx;
				height: 104rpx;
				border-radius: 50rpx;
			}
		}
		.nav-address{
			font-size: 28rpx;
			color: #777D8A;
			margin-bottom: 82rpx;
		}
		.nav-item{
			&.active{
				color: #F5C249;
				i{
					color:#F5C249;
				}
			}
			// width: 400rpx;
			// padding: 0 30rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 60rpx;
			margin-bottom: 48rpx;
			.nav-item-l{
				display: flex;
				align-items: center;
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight:100;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}
			
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		image{
			width: 40rpx;
			height: 30rpx;
		}
	}
	.menu-right{
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #A7AEBE;
	}
	.team-head{
		position: relative;
		padding: 0 22rpx;
		margin: 30rpx 40rpx 40rpx;
		// background: #ffffff;
		// background:$theme-dark-color;
		border-radius: 20rpx;
		position: relative;
		.team-head-t{
			line-height: 108rpx;
			padding: 30rpx 0 0 56rpx;
			color: #B0B1B0;
			font-size: 28rpx;
			border-bottom: 1rpx solid #f0f0f0;
			text{
				color: #E88606;
				font-size: 40rpx;
				font-weight: bold;
			}
		}
		.team-head-con{
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 44rpx 50rpx;
			border-radius: 20rpx;
			.team-head-con-item{
				width: 50%;
				padding: 40rpx 0 0;
				text{
					font-size: 28rpx;
					color: #B0B1B0;
				}
				view{
					margin-top: 12rpx;
					color: $white;
					line-height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
		
		.team-head-bg{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			width: 734rpx;
			height: 446rpx;
			z-index: -1;
		}
	}
	.node-content{
		margin: 0 40rpx;
		background: #ffffff;
		// background:$theme-dark-color;
		border-radius: 20rpx;
		position: relative;
		box-shadow: -5rpx 5rpx 10rpx rgba($color: #000000, $alpha: .1);
		position: relative;
		&::before{
			content: "";
			left: 0;
			bottom: 0;
			z-index: -1;
			position: absolute;
			width: 100%;
			border-radius: 20rpx;
			height: 100%;
			box-shadow: 5rpx -5rpx 10rpx rgba($color: #000000, $alpha: .1);
		}
		.node-content-t{
			padding: 0 30rpx;
			color: #B0B1B0;
			border-bottom: 1rpx solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			view{
				line-height: 88rpx;
				font-size: 28rpx;
			}
			text{
				font-size: 36rpx;
				color: $black;
				font-weight: bold;
			}
		}
		.node-content-co{
			display: flex;
			align-items: center;
			.node-content-co-item{
				padding: 40rpx 0 50rpx;
				flex: 1;
				text-align: center;
				text{
					color: #B0B1B0;
					font-size: 28rpx;
				}
				view{
					margin-top: 24rpx;
					font-size: 36rpx;
					color: $black;
					font-weight: bold;
				}
			}
		}
	}
	
	
	// page {
	// 	background-color: #f1f1f1;
	// }
	.lever-tip{
		background: $adorn-red;
		color: $black;
		text-align: center;
		line-height: 65rpx;
	}
	.app-setting {
		.list {
			.level-wrapper {
				// background: #181a29;
				padding-top: 1upx;
				padding: 0 48rpx;
				.inner-content {
					padding-left: 0;
					position: relative;
					.inner-content-c{
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1rpx solid  rgba($color: #9A9CB8, $alpha: .05);;
						padding: 30rpx 0;
						.inner-content-r{
							color: $white;
							font-size: 28rpx;
						}
						.inner-content-l{
							display: flex;
							// align-items: center;
							flex-direction: column;
							color: $white;
							font-size: 28rpx;
							text{
								color: rgba($color: #ffffff, $alpha: .6);
								margin-top: 8rpx;
								display: block;
								line-height: 34rpx;
								padding: 4rpx 8rpx;
								font-size: 26rpx;
							}
						}
					}
					overflow: hidden;
					.grade1 {
						.piece {
							padding-left: 48upx !important;
							margin-top: 0 !important;
						}
						.title {
							margin-left: 40upx !important;
							font-weight: bold !important;
							color: $default-color !important;
						}
						.info {
							margin-left: 40upx !important;
						}
						.btn {
							width: 48upx !important;
							height: 48upx !important;
							font-size: 20px !important;
							bordr-radius: 20upx !important;
						}
					}
					.grade2 {
						margin-left: 78upx;
						&:first-child {
							border: 1px solid red !important;
							background-color: #2daaff !important;
							.vline{
								height: 114upx !important;
								top: -78upx !important;
							}
						}
					}
					.grade3 {
						margin-left: 146upx;
						.vline {
							top: -79upx !important;
							height: 114upx !important;
						}
						.piece {
							padding-left: 0 !important;
						}
					}
					.piece {
						position: relative;
						padding-left: 36upx;
						margin-top: 70upx;
						.btn {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 36upx;
							height: 36upx;
							border-radius: 10upx;
							color: $default-color;
							background-color: #f00;
							border-radius: 8upx;
							font-size: 16px;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.vline {
							position: absolute;
							height: 228upx;
							width: 1upx;
							background-color: #f00;
							left: -52upx;
							top: -192upx;
						}
						.hline {
							position: absolute;
							width: 52upx;
							height: 1upx;
							background-color: #f00;
							left: -52upx;
							top: 33upx;
						}
						.title {
							font-size: 14px;
							color: #626262;
							margin-left: 16upx;
						}
						.info {
							font-size: 10px;
							color: #f00;
							margin-top: 20upx;
							margin-left: 16upx;
						}
						.two {
							width: 50upx;
							height: 26upx;
							font-size: 13px;
							color: rgba(79, 194, 149, 1);
							background-color: rgba(79, 194, 149, .2);
							padding: 4upx 12upx;
							margin-left: 16upx;
							border-radius: 6upx;
						}
						.three {
							width: 50upx;
							height: 26upx;
							font-size: 13px;
							color: rgba(255, 145, 64, 1);
							background-color: rgba(255, 145, 64, .2);
							padding: 4upx 12upx;
							margin-left: 16upx;
							border-radius: 6upx;
						}
					}
				}
			}
			.header{
				display: flex;
				flex-flow:row wrap;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 268upx;
				// background: $theme-color;
				&.lastColor{
					background-color: #c4aa6e;
				}
				.head-img{
					width: 144upx;
					height: 144upx;
					background-color: #fff;
					border-radius:72upx;
					text-align: center;
					overflow: hidden;
					image{
						width: 144upx;
						height: 144upx;
						border-radius: 72rpx;
					}
				}
				.fonts{
					width: 100%;
					text-align: center;
					font-size: 28upx;
					margin-top:-50upx;
					color: $black;
					font-weight: bold;
				}
			}
			.menuList-top{
				background: #ffffff;
				color: $black;
				padding: 40rpx 40rpx;
				margin-bottom: 20rpx;
				position: relative;
				box-shadow: -5rpx 5rpx 10rpx rgba($color: #000000, $alpha: .4);
				position: relative;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				&::before{
					content: "";
					left: 0;
					bottom: 0;
					z-index: -1;
					position: absolute;
					width: 100%;
					height: 100%;
					box-shadow: 5rpx -5rpx 10rpx rgba($color: #000000, $alpha: .1);
				}
				text{
					font-size: 40rpx;
					color: $black;
					margin-left: 15rpx;
					font-weight: bold;
				}
			}
			.menuList{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				// height: 176upx;
				justify-content: space-between;
				align-items: center;
				padding-top:44upx;
				padding-bottom:52upx;
				width: 100%;
				background-color:$theme-dark-color;
				box-shadow: -5rpx 5rpx 10rpx rgba($color: #000000, $alpha: .4);
				position: relative;
				&::before{
					content: "";
					left: 0;
					bottom: 0;
					z-index: -1;
					position: absolute;
					width: 100%;
					height: 100%;
					box-shadow: 5rpx -5rpx 10rpx rgba($color: #000000, $alpha: .1);
				}
				.item{
					width: 33.33%;
					text-align: center;
					margin-bottom: 15rpx;
					._p{
						font-size: 20px;
						color: $black;
						font-weight: bold;
						&.acolor{
							color:#c4aa6e;
						}
					}
					._div{
						font-size: 14px;
						margin-top: 10upx;
						color: $light_gray1;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>
